<template>
    <!-- 当前页数-1 乘以 显示条数   当前页数乘以显示条数 -->
    <el-table :data="filterTableData.slice((currentPage4 - 1) * pageSize4,currentPage4 * pageSize4)" style="width: 100%">
     <el-table-column prop="id" label="编号" />
     <el-table-column prop="title" label="楼盘名称" />
     <el-table-column prop="type" label="房源类型" />
     <el-table-column prop="num" label="门牌号" />
     <el-table-column prop="hometype" label="房源户型" />
     <el-table-column prop="name" label="户主" />
     <!-- 输入框 -->
     <el-table-column align="right">
        <template #header> 
            <el-input v-model="search" size="small" placeholder="Type to search" />
        </template>
     </el-table-column>
    </el-table>
    <!-- 导航 -->
    <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="filterTableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4.value"
    />
</template>
<script lang="ts" setup>
    import {ref,computed,onMounted} from "vue"
    import { useStore } from "vuex";
    import link from '../../api/link.js'
    // 参数和方法
    const currentPage4 = ref(1)
    const pageSize4 = ref(10)
    const search = ref('')
    const store = useStore()
    const userList = ref([])

    onMounted(() => {
        getTableList()
    })

    //获取住户信息
    const getTableList = () => {
        link('/userlist').then((res) => {
            console.log(res);
            if (res.data.length) {
                ElMessage({
                    message: '信息获取成功！'
                })
                userList.value = res.data
            } else {
                ElMessage({
                    message: '信息获取失败！'
                })
            }
        })
    }
    const filterTableData = computed(() => {
        return userList.value.filter((item:any) => item.name.toLowerCase().includes(search.value.toLowerCase()))
    })
    const handleSizeChange = (val: number) => {
        // 一页显示多少条
        pageSize4.value = val
    }
    const handleCurrentChange = (val: number) => {
        // 页码更改
        currentPage4.value = val
    }
    
</script>
<style></style>